import React, { useState } from 'react';

const slow = () => {
	const [count, setCount] = useState(0);
	return (
		<div title={count + ''}>
			<span>{count}</span>
			<button className='w-30 p-2 bg-red-400 text-white' onClick={() => setCount(count + 1)}>increase</button>
			<Slow />
			<div className=' text-yellow-400 text-xs '>{count}</div>
			<Slow2 />
		</div>
	);
};

function Slow() {
	const now = performance.now();
	while ((performance.now() - now) < 1000) { }

	console.log('slow rended');
	return <div>Slow</div>;
}

function Slow2() {
	const now = performance.now();
	while ((performance.now() - now) < 1000) { }

	console.log('slow2 rended');
	return <div>Slow2</div>;
}

export default slow;